import React, { Component } from "react";

import { Row, Col, Icon } from "antd";
import { NavLink } from "react-router-dom";
import ShufflingSrc from "../img/shuffling.png";
import Elf from "../img/elf.png";

class topList extends Component {
  render() {
    return (
      <div>
        <header className="cla-header">
          <div className="flex">
            <NavLink to="/">
              <div className="cla-fh">
                <Icon type="left" />
              </div>
            </NavLink>
            <span className="span">福利</span>
          </div>
          <div className="flex">
            <div className="flex-margin">
              <Icon type="filter" />
            </div>
            <div className="flex-margin">
              <Icon type="search" />
            </div>
            <div className="flex-margin">
              <Icon type="menu" />
            </div>
          </div>
        </header>
        <img className="shufflingImg" src={ShufflingSrc} alt="" />
        <div className="btnListBox">
          <Row type="flex" justify="space-around">
            <Col className="btnList" span={4}>
              <div className="elfBox">
                <img className="sign" src={Elf} alt="" />
              </div>
              <p style={{ textAlign: "center" }}>签到有礼</p>
            </Col>
            <Col className="btnList" span={4}>
              <div className="elfBox">
                <img className="novice" src={Elf} alt="" />
              </div>
              <p style={{ textAlign: "center" }}>新手礼包</p>
            </Col>
            <Col className="btnList" span={4}>
              <div className="elfBox">
                <img className="task" src={Elf} alt="" />
              </div>
              <p style={{ textAlign: "center" }}>每日任务</p>
            </Col>
            <Col className="btnList" span={4}>
              <div className="elfBox">
                <img className="welfare" src={Elf} alt="" />
              </div>
              <p style={{ textAlign: "center" }}>首冲福利</p>
            </Col>
          </Row>
        </div>
      </div>
    );
  }
}

export default topList;
